<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/css/reset.css" />
  <link rel="stylesheet" href="/css/style.css" />
</head>

<body>
  <div class="box">
    <!-- header开始 -->
    <header id="header">
      <!-- 顶部 -->
      <div class="headerTop">
        <!-- 版心 -->
        <div id="headerTopMain">
          <!-- 顶部左侧 -->
          <div id="left">
            <h5>欢迎来到尚优选！ 请</h5>
            <p>
              <a href="javascript:;">登录</a> <a href="javascript:;">注册</a>
            </p>
          </div>
          <!-- 顶部右侧 -->
          <div id="right">
            <nav>
              <a href="javascript">我的订单</a>
              <a href="javascript">我的购物车</a>
              <a href="javascript">我的尚优选</a>
              <a href="javascript">尚优选会员</a>
              <a href="javascript">企业采购</a>
              <a href="javascript">关注尚优选</a>
              <a href="javascript">合作招商</a>
              <a href="javascript">商家后台</a>
            </nav>
          </div>
        </div>
      </div>
      <!-- header的下部分 -->
      <div id="headerBottom">
        <!-- 版心 -->
        <div id="headerBottomMain">
          <!-- 左侧logo -->
          <div id="logo">
            <a href="javascript:;">
              <img src="/images/logo.png" alt="" />
            </a>
          </div>
          <!-- 右侧搜索框 -->
          <div id="search">
            <input type="text" placeholder="请输入搜索内容" />
            <input type="submit" value="搜索" />
          </div>
        </div>
      </div>
    </header>
    <!-- header结束 -->
  </div>
  <!-- 商品导航开始 -->
  <div id="commodity">
    <!-- 版心 -->
    <div class="commodityMain">
      <!-- nav -->
      <nav>
        <!-- 全部商品分类 -->
        <li><a href="javascript:;">全部商品分类</a></li>
        <!-- 右侧列表 -->
        <li><a href="javascript:;">服装城</a></li>
        <li><a href="javascript:;">美妆馆</a></li>
        <li><a href="javascript:;">尚优选超市</a></li>
        <li><a href="javascript:;">全球购</a></li>
        <li><a href="javascript:;">闪购</a></li>
        <li><a href="javascript:;">团购</a></li>
        <li><a href="javascript:;">有趣</a></li>
        <li><a href="javascript:;">秒杀</a></li>
      </nav>
    </div>
  </div>
  <!-- 商品导航结束 -->

  <!-- 商品内容放大镜区域开始 -->
  <div id="content">
    <!-- 版心 -->
    <div id="contentMain">
      <!-- 路径导航 -->
      <ul class="navPath">
        <a href="javascript">手机、数码、通讯</a>
        <i>/</i>
        <a href="javascript">手机</a>
        <i>/</i>
        <a href="javascript">Apple苹果</a>
        <i>/</i>
        <a>iphone 6S系</a>
      </ul>
      <!-- 主题内容区域开始 -->
      <div class="major">
        <!-- 左侧放大镜区域开始 -->
        <div class="left">
          <!-- 放大镜上边 -->
          <div class="leftTop">
            <!-- 小图片 -->
            <div class="smallPhoto">
              <!-- <img src="/images/s1.png" alt="" /> -->
              <!-- 蒙版元素 -->
              <!-- <div class="mask"></div> -->
            </div>
            <!-- 大图片 -->

          </div>
          <!-- 放大镜下方轮播图 -->
          <div class="leftBottom">
            <!-- 左箭头 -->
            <a href="javascript:;" class="prev">&lt;</a>
            <!-- 可视区域 -->
            <div class="picList">
              <!-- 中间图片 -->
              <ul id="thumbnail">
                <!-- <li><img src="/images/s1.png" alt=""></li> -->
              </ul>
            </div>
            <!-- 右箭头 -->
            <a href="javascript:;" class="next">&gt;</a>
          </div>
        </div>
        <!-- 左侧放大镜区域结束 -->

        <!-- 右侧商品详情开始 -->
        <div class="right">
          <!-- 右侧的上面 -->
          <div class="rightTop">
            <!-- 手机标题 -->
            <h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机bbb123</h3>
            <p class="discountContent">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
            <!-- 价格区域 -->
            <div class="priceArea">
              <!-- 价格区域第一行 -->
              <div class="firstLine">
                <!-- 第一行的左侧标题 -->
                <div class="firstLineLeft">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                <!-- 第一行的右侧 -->
                <div class="firstLineRight">
                  <span id="doller">￥</span>
                  <p id="price">5299</p>
                  <span id="inform">降价通知</span>
                </div>
                <!-- 评价 -->
                <!-- <div class="evaluate">
                  <p>累计评价 670000</p>
                </div> -->
              </div>
              <!-- 价格区域第二行 -->
              <div class="secondLine">
                <!-- 第二行的左侧标题 -->
                <div class="secondLineLeft">
                  促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销
                </div>
                <!-- 第二行的右侧 -->
                <p class="secondLineRight">
                  <span>加价购</span>
                  <span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</span>
                </p>
              </div>
            </div>
            <!-- 支持区域  包括地址 -->
            <div class="suppot">
              <!-- 第一行 -->
              <div>
                <!-- 第一行的左侧标题 -->
                <div>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                <!-- 第一行右侧内容 -->
                <p>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</p>
              </div>
              <!-- 第二行 -->
              <div>
                <!-- 第二行的左侧标题 -->
                <div>配&nbsp;送&nbsp;至</div>
                <!-- 第二行右侧内容 -->
                <p>广东省 深圳市 宝安区</p>
              </div>
            </div>

          </div>
          <!-- 右侧的下面 -->
          <div class="rightBottom">
            <!-- 选择区域 -->
            <div class="chooseAddress">
              <div class="firstLine">
                <div>选择颜色</div>
                <p>
                  <input type="button" value="金色">
                  <input type="button" value="银色">
                  <input type="button" value="黑色">
                </p>
              </div>
              <div class="secondLine">
                <div>内存容量</div>
                <p>
                  <input type="button" value="16G">
                  <input type="button" value="64G">
                  <input type="button" value="128G">
                  <input type="button" value="256G">
                </p>
              </div>
              <div class="thirdLine">
                <div>选择版本</div>
                <p>
                  <input type="button" value="公开版">
                  <input type="button" value="移动版">
                </p>
              </div>
              <div class="fourthLine">
                <div>购买方式</div>
                <p>
                  <input type="button" value="官方标配">
                  <input type="button" value="优惠移动版">
                  <input type="button" value="电信优惠版">
                </p>
              </div>
            </div>
            <!-- 加入购物车区域 -->
            <div class="shoppingTrolley">
              <!-- 左侧数字区域 -->
              <div class="digital">
                <!-- 输入框 -->
                <input type="text">
                <!-- 加减法框 -->
                <span>+</span>
                <span>-</span>
              </div>
              <!-- 按钮区域 -->
              <button>加入购物车</button>
            </div>


          </div>
        </div>
        <!-- 右侧商品详情结束 -->
      </div>
      <!-- 主题内容区域结束 -->
    </div>
  </div>

  <!-- 商品内容放大镜区域结束 -->
  <script src="/js/data.js"></script>
  <script src="/js/index.js"></script>
</body>

</html>